﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Canvas Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<!-- general libraries -->

<!--[if IE]>
<script src="excanvas.js" type="text/javascript"></script>
<![endif]--> 


<script src="jquery.js" type="text/javascript" ></script>   

<script type="text/javascript">

$(window).load(function () 
{ 
	var canvas = document.getElementById("Canvas");
	var ctx = canvas.getContext("2d");
	
	ctx.fillStyle = "#FF0000";
	ctx.fillRect (10, 10, 100, 100);
	
	ctx.fillStyle = "#FFFFFF";
	ctx.fillRect (90, 90, 100, 100);
	
    var backgroundGradient = ctx.createLinearGradient(0, 50, 0,  150);
    backgroundGradient.addColorStop(0,  "rgba(0, 0, 255, 0.9)");
    backgroundGradient.addColorStop(1 , "rgba(0, 0, 255, 0.3)");

	
	ctx.fillStyle = backgroundGradient; // "rgba(0, 0, 255, 0.5)";
	ctx.fillRect (50, 50, 100, 100);
	
	
	ctx.beginPath();
	ctx.moveTo(75,75);
	ctx.lineTo(150,25);
	ctx.lineTo(200,200);
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(75,25);
	ctx.quadraticCurveTo(25,25,25,62.5);
	ctx.quadraticCurveTo(25,100,50,100);
	ctx.quadraticCurveTo(50,120,30,125);
	ctx.quadraticCurveTo(60,120,65,100);
	ctx.quadraticCurveTo(125,100,125,62.5);
	ctx.quadraticCurveTo(125,25,75,25);
	ctx.fill();

 });
 
 </script>
 
<style>
body
	{
 	background-color:yellow;
 	}
 	
 	.Content
 	{
	 border: 1px red solid;
	 margin: 5px 5px 5px 5px;

	}
	
	
#Navigation				/* Ribbon */
{
	background-color: #F4F8FF;
	display: block;
	/* overflow: hidden; */
	margin-right: 0.3em;
	margin-left: 0.3em;
	margin-top: 0.3em;
	min-width: 950px;
	height: 9.6em;
}

#Navigation .logo
{
	display:block;
	float:left;
	padding-top:3px;
	padding-left:3px;
	padding-right:0.4em;
}


#Navigation .languages	/* LANGUAGES */
{
	display:block;
	float:right;
	padding: 6px 12px 1px 1px;
}

#Navigation .languages > li	/* einzelne Language */
{
	padding: 0px 0px 0px 6px;
	display:block;
	float: right;
}

 

#Navigation .navareas	/* TABS */
{
	display:block;
	float:left;
	padding-top:15px;
}

#Navigation .navareas > li	/* einzelnes TAB */
{
	display:block;
	float: left;
	padding-top: 0.1em;
	padding-left: 1.1em;
	padding-right: 1.1em;
	height: 1.7em;
}

#Navigation .navareas > li > a 	/* Tab Link */
{
	cursor: pointer;
	text-decoration: none;

}


#Navigation .navareas > li > a:hover 	/* Maus über Tab Link */
{
 	/* background-color: #5E77AA; */
 	background-image: url("/Images/HoverGradientTabs.png");
 	background-repeat:repeat-x;
 	background-position:left top;

 	color: #003399;
 }
 
#Navigation .navareas > li > a > span	/* Tab Label */
{
	font-weight:bolder;
	font-size:115%;
	color:#42619F;
}

#Navigation .navareas > li > a:hover > span	/* Tab Label */
{
	color:#003399;
}

#Navigation .navareas > li.active > a > span	/* Tab Label */
{
	color:#003399;
} 
 

#Navigation .navareas > li.active 		/* das aktiv markierte TAB */
{
	/* background-color: #CED9F0; */
	padding-left: 0.8em;
	height: 1.7em
} 
 
#Navigation .navgroups	/* Groups */
{
	display:block;
	clear:left;
	float: left;
	/* float:left; */
	width:100%;
	height:100%;
	background-color: #CED9F0;
	padding-top:0.0em;
	padding-bottom:0.2em;
}
 
 </style>
 
</head>

<body>

<div class="Content">
<p>This is the unwrapped DIV with Text</p>
</div>

<div class="Content" id="Navigation">
<div style="position:relative;">
<canvas id="Canvas" style="position:absolute; padding: 0 0 0 0;"  class="jbgCanvas" style="width:1000; height:1000;" />
</div> 

<div class="jbgContentDiv" style="width:auto; height:auto; border: 0px transparent solid; display:block; position:relative;">

<span class="logo">
<a href="/de/" title="Startseite Maierhofer Software">
<img src="/Images/Maierhofer-Logo.png" alt="Startseite Maierhofer Software" title="Startseite Maierhofer Software" />
</a></span>
 
<ul class="navareas">
<li class="active"> 
        <a title="Softwareprojekte die bei Maierhofer Software entwickelt werden" href="/de/">
            <span>Software-Entwicklung</span>
        </a>
    </li><li> 
        <a title="Open Source Projekte bei maierhofer software" href="/de/open-source/">
            <span>Open Source Projekte</span>
        </a>
    </li>
</ul>
 
<ul class="languages">
<li>
 
</li>
<li>
<a href="/en/" hreflang="en" title="Software Development: Software projects developed by maierhofer software">
<img src="/Images/Language-English.png" alt="Software Development" Title="Software Development: Software projects developed by maierhofer software" />
</a>
</li>
</ul>
 
<ul class="navgroups">
<li> 
            <ul class="navlinks">
                
            <li> 
            <a href="/de/touristik-it/projekte.aspx"><img src="/images/project-management48.png" alt="Projekte" title="" />
                <span>Projekte</span>
            </a>
            </li>
            <li><ul>
            <li> 
            <a href="/de/touristik-it/reisebuerosoftware-maxi.aspx"><img src="/images/reisebuero-software24.png" alt="Reisebürosoftware maxi" title="" />
                <span>Reiseb&#252;rosoftware maxi</span>
            </a>
            </li>
            
            <li> 
            <a href="/de/touristik-it/urlaub-und-reisen-profis.aspx"><img src="/images/palmtree24.png" alt="Urlaub und Reisen Profis" title="" />
                <span>Urlaub und Reisen Profis</span>
            </a>
            </li>
            </ul></li>
            </ul>
            <span title="Informationstechnologie für die Touristik">Touristik IT</span></li>
<li> 
            <ul class="navlinks">
                
            <li> 
            <a title="News von Maierhofer Software lesen" href="/de/news.aspx"><img src="/images/newspaper48.png" alt="News lesen" title="News von Maierhofer Software lesen" />
                <span>News lesen</span>
            </a>
            </li>
            
            <li> 
            <a title="News von Maierhofer Software als RSS-Feed" href="/feeds/rss-de.aspx"><img src="/images/rss-feed48.png" alt="News-Feed" title="News von Maierhofer Software als RSS-Feed" />
                <span>News-Feed</span>
            </a>
            </li>
            
            </ul>
            <span title="Geben Sie uns Feedback und erfahren mehr über Maierhofer Software">News</span></li>
<li> 
            <ul class="navlinks">
                <li><ul>
            <li> 
            <a title="MSE-iT stellt sich vor" href="/de/maierhofer/firma.aspx"><img src="/images/contactcard24.png" alt="über uns" title="MSE-iT stellt sich vor" />
                <span>&#252;ber uns</span>
            </a>
            </li>
            
            <li> 
            <a title="Das Impressum der MSE-iT Website" href="/de/maierhofer/impressum.aspx"><img src="/images/shippinglabel24.png" alt="Impressum" title="Das Impressum der MSE-iT Website" />
                <span>Impressum</span>
            </a>
            </li>
            </ul></li>
            </ul>
            <span title="Geben Sie uns Feedback und erfahren mehr über Maierhofer Software">Kontakt</span></li>
 
</ul>
 
 
</div>



</div>





</body>
</html>
